<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>自定义组件</title>
</head>
<body>
<div id="app">
  <currency-input
    label="Price"
    v-model="price"
  ></currency-input>
  <currency-input
    label="Shipping"
    v-model="shipping"
  ></currency-input>
  <currency-input
    label="Handling"
    v-model="handling"
  ></currency-input>
  <currency-input
    label="Discount"
    v-model="discount"
  ></currency-input>

  <p>Total: ${{ total }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/974aa47f8f9c5361c5233bd56be37db8ed765a09/currency-validator.js"></script>
<script>
  Vue.component('currency-input', {
    template: '\
    <div>\
      <label v-if="label">{{ label }}</label>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        v-on:focus="selectAll"\
        v-on:blur="formatValue"\
      >\
    </div>\
  ',
    props: {
      value: {
        type: Number,
        default: 0
      },
      label: {
        type: String,
        default: ''
      }
    },
    mounted: function () {
      this.formatValue();
    },
    methods: {
      updateValue: function(value) {
        var result = currencyValidator.parse(value, this.value)
        if (result.warning) {
          this.$refs.input.value = result.value
        }
        this.$emit('input', result.value)
      },
      formatValue: function () {
        this.$refs.input.value = currencyValidator.format(this.value)
      },
      selectAll: function (event) {
        // Workaround for Safari bug
        // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
        setTimeout(function () {
          event.target.select()
        }, 0)
      }
    }
  })

  new Vue({
    el: '#app',
    data: {
      price: 0,
      shipping: 0,
      handling: 0,
      discount: 0
    },
    computed: {
      total: function () {
        return ((
          this.price * 100 +
          this.shipping * 100 +
          this.handling * 100 -
          this.discount * 100
        ) / 100).toFixed(2)
      }
    }
  })

</script>

</body>
</html>
